<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="../layui/css/layui.css" type="text/css">
    <script src="../layui/layui.js" type="text/javascript"></script>
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <style>
        .layui-table-cell .layui-form-checkbox[lay-skin="primary"] {
            top: 50%;
            transform: translateY(-50%);
        }
        .layui-table-cell{
            text-align:center;
            height: auto!important;
            white-space: normal;
        }
    </style>
</head>
<body>

<div class="layui-container-fluid">
    <div class="layui-row">

        <div class="layui-col-xs12">
            <%--新增按钮--%>
            <button id="add_btn" class="layui-btn layui-btn-radius layui-btn-normal">新增轮播图</button>

            <div class="layui-input-inline">
                <input id="name1" type="text" name="name" autocomplete="off" class="layui-input">
            </div>
            <button id="search_btn" class="layui-btn layui-btn-radius layui-btn-danger">搜索</button>
            <%--table表格--%>
            <table id="demo" lay-filter="demo"></table>
        </div>
    </div>
</div>

<%--新增表单--%>
<form class="layui-form" style="display: none;padding: 10px 30px 0px 0px;" id="addForm"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->

    <div class="layui-form-item">
        <label class="layui-form-label">名称</label>
        <div class="layui-input-block">
            <input type="text" lay-verify="required" name="bannerOldName" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">描述</label>
        <div class="layui-input-block">
            <input type="text" lay-verify="required" name="bannerDescription" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">上传图片</label>
        <input type="hidden" id="picPath" name="bannerImageUrl">
        <div class="layui-input-list">
            <button type="button" class="layui-btn" id="test1">
                <i class="layui-icon">&#xe67c;</i>点击上传
            </button>
        </div>
    </div>
    <div>
        <label class="layui-form-label"></label>
        <img class="layui-upload-img" id="uploadImgId" width="80px" height="60px">
    </div>

    <div class="layui-form-item"></div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="addBanner">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<%--修改表单--%>
<form class="layui-form" style="display: none;padding: 10px 30px 0px 0px;" lay-filter="updateForm" id="updateForm"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <input type="hidden" name="bannerId">
    <div class="layui-form-item">
        <label class="layui-form-label">名称</label>
        <div class="layui-input-block">
            <input type="text" lay-verify="required" name="bannerOldName" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">描述</label>
        <div class="layui-input-block">
            <input type="text" lay-verify="required" name="bannerDescription" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">上传图片</label>
        <input type="hidden" id="picPath2" name="bannerImageUrl">
        <div class="layui-input-list">
            <button type="button" class="layui-btn" id="test2">
                <i class="layui-icon">&#xe67c;</i>点击上传
            </button>
        </div>
    </div>
    <div>
        <label class="layui-form-label"></label>
        <img class="layui-upload-img" id="uploadImgId2" width="80px" height="60px">
    </div>

    <div class="layui-form-item"></div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="updateBanner">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>


<script>
    //开启layui的各种组件
    layui.use(['layer','laydate','table','form','upload'],function () {
        var laydate=layui.laydate;
        var form=layui.form;
        var table=layui.table;
        var layer=layui.layer;
        var upload=layui.upload;
        var path='${pageContext.request.contextPath}/';

        //一个修改弹出层，便于关闭弹出层
        var updateIndex;
        var addBannerIndex;

        //渲染table表格
        table.render({
            elem: '#demo'//id选择器选择表格
            ,url: '${pageContext.request.contextPath}/cmfzBanner/selectAllBannerByPage' //数据接口
            ,page: true //开启分页
            ,limit:3
            ,limits:[3,5,10]
            ,cols: [[ //表头
                {field: 'bannerId', title: 'ID',sort:true}
                ,{field: 'bannerOldName',title: '名称'}
                ,{field: 'bannerState',title: '状态'}
                ,{field: 'bannerDate',title: '上传时间'}
                ,{field: 'bannerImageUrl',title: '图片',templet: function(d){
                    return "<img src='"+path+d.bannerImageUrl+"' height='80'/>";
                }}
                ,{field: 'bannerDescription',title: '描述'}
                ,{title:"操作", width:300,align:'center',toolbar: '#barDemo'}//引入外部的toolbar进行渲染
            ]]
        });

        //图片的上传
        upload.render({
            elem: '#test1' //绑定元素
            ,url: '${pageContext.request.contextPath}/cmfzBanner/uploadBannerImg' //上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#uploadImgId').attr('src',result); //图片链接（base64）
                });
            },done: function(res){
                //上传完毕回调,给表单中赋值
                $("#picPath").val(res.path);
                layer.msg(res.msg);
            }
            ,error: function(res){
                //请求异常回调
                layer.msg(res.msg);
            }
        });

        upload.render({
            elem: '#test2' //绑定元素
            ,url: '${pageContext.request.contextPath}/cmfzBanner/uploadBannerImg' //上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#uploadImgId2').attr('src', result); //图片链接（base64）
                });
            },done: function(res){
                //上传完毕回调,给表单中赋值
                $("#picPath2").val(res.path);
                layer.msg(res.msg)
            }
            ,error: function(){
                //请求异常回调
                layer.msg(res.msg)
            }
        });

        $("#add_btn").click(function () {
            $('#uploadImgId').attr('src', '');
            addBannerIndex=layer.open({
                type: 1,
                content: $('#addForm')
            });
        });

        //监听表单的提交 addBanner为按钮的lay-filter ,同时会把data数据带过来
        form.on("submit(addBanner)",function (data) {
            $.ajax({
                url:"${pageContext.request.contextPath}/cmfzBanner/addBanner",
                type:"post",
                dataType:"json",
                data:data.field,
                success:function (result) {
                    if (result.flag){
                        //关闭弹出层，清空表单,提示修改成功
                        layer.close(addBannerIndex);
                        table.reload('demo');
                        layer.msg(result.message);
                    } else {
                        layer.msg(result.message);
                    }
                }
            });
            return false;//防止表单跳转
        });


        //监听修改表单的提交 updateHero为按钮的lay-filter ,同时会把data数据带过来
        form.on("submit(updateBanner)",function (data) {
            $.ajax({
                url:"${pageContext.request.contextPath}/cmfzBanner/updateBanner",
                type:"post",
                dataType:"json",
                data:data.field,
                success:function (result) {
                    if (result.flag){
                        //关闭弹出层，清空表单,提示修改成功
                        layer.close(updateIndex);
                        table.reload('demo');
                        layer.msg(result.message);
                    } else {
                        layer.msg(result.message);
                    }
                }
            });
            return false;//防止表单跳转
        });


        //监听表格的几个按钮
        table.on("tool(demo)",function (obj) {
            var data=obj.data;// 拿到该行的数据
            var layEvent=obj.event; //事件
            //修改
            if (layEvent=='edit'){
                //弹出层，并且给表单赋值
                updateIndex=layer.open({
                    type: 1,
                    content: $('#updateForm')
                });
                //第一个为lay-filter
                console.log(data)
                $("#uploadImgId2").prop("src",'${pageContext.request.contextPath}/'+data.bannerImageUrl);
                form.val("updateForm",data);

               /* form.val("updateForm", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
                    "username": "贤心" // "name": "value"
                    ,"sex": "女"
                    ,"auth": 3
                    ,"check[write]": true
                    ,"open": false
                    ,"desc": "我爱layui"
                });*/
            }

            if (layEvent=='del'){
                //删除操作
                layer.confirm('确定删除吗?', {icon: 3, title:'提示'}, function(index){
                    $.ajax({
                        //逻辑删除
                        url:"${pageContext.request.contextPath}/cmfzBanner/deleteBanner",
                        type:"post",
                        data:{id:data.bannerId},
                        dataType:"json",
                        success:function (result) {
                            if (result.flag){
                                //删除成功
                                layer.msg(result.message);
                                //重新加载页面
                                table.reload('demo', {page: {
                                        curr: 1 //重新从第 1 页开始
                                    }});
                            } else {
                                layer.msg(result.message);
                            }
                        }
                    });
                    layer.close(index);
                });
            }
        });
    })
</script>

<%--toolbar用于引入--%>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

</body>
</html>
